<template>
  <div class="admin_box">
    <select-from-admin
      v-model:values="formState"
      @on-submit="onSearch"
      @on-clear="onClear"
    />

    <rx-table
      y="57vh"
      table-name="admin"
      :data-source="dataLists"
      :columns="columns"
      :loading="loading"
      :total-data="dataTotal"
      :pagination="formState.page"
      @on-excel="(query) => excelHandler(query)"
      @on-refresh="pageHandler"
      @on-delete="(list) => delHandler(list)"
      @on-page="onPage"
      @on-alter="onAlter"
    >
      <template #alter="{ onHandleBthClick, fromData }">
        <from-admin
          :role-list="roleList"
          :key="new Date() + 'admin-from'"
          @handle-bth-click="onHandleBthClick"
          :data="fromData"
        />
      </template>

      <template #default="{ record, column }">
        <template v-if="column.key === 'sex'">
          <a-tag :color="record.sex === CommonStateEnum.NO ? 'pink' : 'blue'">
            {{
              t(`user.${record.sex == CommonStateEnum.YES ? 'boy' : 'girl'}`)
            }}
          </a-tag>
        </template>

        <template v-if="column.key === 'role'">
          <a-tag
            :color="
              record.role.roleValue < RoleEnum.SUPER_ADMIN ? 'blue' : 'red'
            "
          >
            {{ t(`common.${record.role.roleName}`) }}
          </a-tag>
        </template>

        <template v-if="column.key === 'avatar'">
          <a-image
            style="border-radius: 5px"
            :width="50"
            :height="50"
            :src="record.avatar"
          />
        </template>

        <template
          v-if="column.key === 'createTime' || column.key === 'updateTime'"
        >
          <a-space>
            <component
              style="font-size: 16px"
              :is="
                column.key === 'createTime'
                  ? ClockCircleOutlined
                  : PieChartOutlined
              "
            ></component>
            {{
              column.key === 'createTime'
                ? record.createTime
                : record.updateTime
            }}
          </a-space>
        </template>

        <template v-else-if="column.key === 'state'">
          <a-tag
            :color="record.state === CommonStateEnum.YES ? 'green' : 'volcano'"
          >
            {{
              t(
                `common.${
                  record.state == CommonStateEnum.YES ? 'normal' : 'disable'
                }`
              )
            }}
          </a-tag>
        </template>
      </template>
    </rx-table>
  </div>
</template>

<!-- 管理人员页面 -->
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import SelectFromAdmin from '@/components/business/from/select-from-admin.vue'
import FromAdmin from '@/components/business/from/from-admin.vue'
import RxTable from '@/components/business/rx_table/rx-table.vue'
import { CommonStateEnum } from '@/config/enum/common'
import { onMounted, ref } from 'vue'
import { AddQuery, Admin, PageQuery, UpdateQuery } from '@/api/admin/type'
import { ClockCircleOutlined, PieChartOutlined } from '@ant-design/icons-vue'
import { Role } from '@/api/role/type'
import { ReqAllRole } from '@/api/role'
import { tableHandler, Key } from '@/components/business/rx_table/handler'
import { RoleEnum } from '@/config/enum/RoleEnum'

/**
 * 角色列表
 */
const roleList = ref<Role[]>([])

/**
 * 国际化状态
 */
const { t } = useI18n()

/**
 * 查询表单
 */
const formState = ref<PageQuery>({
  username: '',
  phone: '',
  nickname: '',
  state: '',
  sex: '',
  size: 10,
  page: 1,
  roleId: '',
})

/**
 * 列集合
 */
const columns = ref([
  {
    title: 'id',
    dataIndex: 'userId',
    key: 'userId',
  },
  {
    title: 'username',
    dataIndex: 'username',
    key: 'username',
    width: 120,
  },
  {
    title: 'role',
    dataIndex: 'role',
    key: 'role',
  },
  {
    title: 'nickname',
    dataIndex: 'nickname',
    key: 'nickname',
    width: 120,
  },
  {
    title: 'avatar',
    dataIndex: 'avatar',
    key: 'avatar',
    width: 100,
  },
  {
    title: 'sex',
    dataIndex: 'Sex',
    key: 'sex',
    width: 100,
  },

  {
    title: 'phone',
    dataIndex: 'phone',
    key: 'phone',
    width: 130,
  },
  {
    title: 'createTime',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 220,
  },
  {
    title: 'state',
    dataIndex: 'state',
    key: 'state',
  },
  {
    title: 'updateTime',
    dataIndex: 'updateTime',
    key: 'updateTime',
    width: 220,
  },
  {
    title: 'option',
    dataIndex: 'option',
    key: 'option',
    fixed: 'right',
    width: 150,
  },
])

/**
 * 通用处理函数
 */
const {
  searchClick,
  dataLists,
  dataTotal,
  addHandler,
  loading,
  updateHandler,
  excelHandler,
  delHandler,
  pageHandler,
} = tableHandler<Admin, PageQuery, AddQuery, UpdateQuery>(
  'admin',
  'userId',
  formState.value
)

/**
 * 编辑，提交确认点击事件
 * @param data 数据
 * @param mode true 编辑  false 新增
 * @param close 关闭弹窗方法
 */
const onAlter = (mode: boolean, data: Admin & Key, close: Function) => {
  let temp = dataLists.value.find((s) => s.userId == data.userId)
  if (!mode) {
    let query: AddQuery = {
      phone: data.phone,
      username: data.username,
      nickname: data.nickname,
      sex: data.sex,
      avatar: data.avatar,
      password: data.password,
      role: temp?.role.roleId == data.role.roleId ? '' : data.role.roleId,
    }
    addHandler(query, close)
    return
  } else {
    let query: UpdateQuery = {
      phone: data.phone,
      nickname: data.nickname,
      sex: data.sex,
      password: data.password,
      userId: data.userId,
      state: data.state,
      avatar: data.avatar,
      role: temp?.role.roleId == data.role.roleId ? '' : data.role.roleId,
    }
    updateHandler(query, close)
  }
}

/**
 * 分页事件
 * @param page 第几页
 * @param pageSize 查询几个
 */
const onPage = (page: number, pageSize: number) => {
  formState.value.page = page
  formState.value.size = pageSize
  searchClick()
}

/**
 * 点击搜索
 */
const getRoleList = () => {
  ReqAllRole().then((res) => {
    if (res.data.code == CommonStateEnum.OK && res.data.data) {
      roleList.value = res.data.data
    }
  })
}

/**
 * 点击搜索
 */
const onSearch = () => {
  formState.value.page = 1
  searchClick()
}

/**
 * 清空搜索条件
 */
const onClear = () => {
  formState.value.nickname = ''
  formState.value.phone = ''
  formState.value.sex = ''
  formState.value.state = ''
  searchClick()
}

/**
 * 页面加载
 */
onMounted(() => {
  pageHandler()
  getRoleList()
})
</script>

<style lang="scss" scoped>
.admin_box {
  position: relative;
  width: calc(100% - 10px);
  padding: 0 5px;
}
</style>
